<template>
  <view class="new-or-edit-modal">
    <up-popup v-model:show="show" overlay mode="bottom" touchable minHeight="50%" maxHeight="80%" closeable closeOnClickOverlay
      @close="close" @open="open" style="overflow-y: auto;">
      <view class="modal-content">
        <view class="modal-header">
          <view class="modal-title">{{ title }}</view>
        </view>
        <scroll-view scroll-y enable-flex style="height: 400px;">
          <up-form labelPosition="left" :model="formModel" :rules="rules" ref="formRef">
            <up-form-item labelWidth="100" label="停车场" prop="parkingId">
              <up-select v-model:current="formModel.parkingId" :options="parkingOptions" label="请选择停车场">
              </up-select>
            </up-form-item>
            <up-form-item labelWidth="100" label="运营商" prop="operatorId">
              <up-select v-model:current="formModel.operatorId" :options="operatorOptions" label="请选择运营商">
              </up-select>
            </up-form-item>
            <up-form-item labelWidth="100" label="设备序列号" prop="deviceSerial">
              <up-input v-model:value="formModel.deviceSerialNo" placeholder="请输入设备序列号">
              </up-input>
            </up-form-item>
            <up-form-item labelWidth="100" label="设备类型" prop="deviceTypeId">
              <up-select v-model:current="formModel.deviceTypeId" :options="deviceTypeOptions" label="请选择设备类型">
              </up-select>
            </up-form-item>
            <up-form-item labelWidth="100" label="厂商类型" prop="factoryId">
              <up-select v-model:current="formModel.factoryId" :options="factoryOptions" label="请选择厂商类型">
              </up-select>
            </up-form-item>
            <up-form-item labelWidth="100" label="泊位号" prop="berthNo">
              <up-input v-model:value="formModel.berthNo" placeholder="请输入泊位号">
              </up-input>
            </up-form-item>
            <up-form-item labelWidth="100" label="通讯协议" prop="protocolId">
              <up-select v-model:current="formModel.protocolId" :options="protocolOptions" label="请选择通讯协议">
              </up-select>
            </up-form-item>
            <up-form-item labelWidth="100" label="视频取流方式" prop="streamTypeId">
              <up-select v-model:current="formModel.streamTypeId" :options="streamTypeOptions" label="请选择视频取流方式">
              </up-select>
            </up-form-item>
            <up-form-item labelWidth="100" label="详细地址" prop="address">
              <up-input v-model:value="formModel.address" placeholder="请输入详细地址">
              </up-input>
            </up-form-item>
            <up-form-item labelWidth="100" label="经度" prop="longitude">
              <up-input v-model:value="formModel.longitude" placeholder="请输入经度">
              </up-input>
            </up-form-item>
            <up-form-item labelWidth="100" label="纬度" prop="latitude">
              <up-input v-model:value="formModel.latitude" placeholder="请输入纬度">
              </up-input>
            </up-form-item>
            <up-form-item labelWidth="100" label="本地IP" prop="localIp">
              <up-input v-model:value="formModel.localIp" placeholder="请输入本地IP">
              </up-input>
            </up-form-item>
            <up-form-item labelWidth="100" label="设备MAC" prop="deviceMac">
              <up-input v-model:value="formModel.deviceMac" placeholder="请输入设备MAC">
              </up-input>
            </up-form-item>
            <up-form-item labelWidth="100" label="设备登录账号" prop="loginAccount">
              <up-input v-model:value="formModel.loginAccount" placeholder="请输入设备登录账号">
              </up-input>
            </up-form-item>
            <up-form-item labelWidth="100" label="设备登录密码" prop="loginPassword">
              <up-input v-model:value="formModel.loginPassword" placeholder="请输入设备登录密码">
              </up-input>
            </up-form-item>
            <up-form-item labelWidth="100" label="物联网卡号" prop="iotCardNo">
              <up-input v-model:value="formModel.iotCardNo" placeholder="请输入物联网卡号">
              </up-input>
            </up-form-item>
            <up-form-item labelWidth="100" label="卡号" prop="cardNo">
              <up-input v-model:value="formModel.cardNo" placeholder="请输入卡号">
              </up-input>
            </up-form-item>
            <up-form-item labelWidth="100" label="备注" prop="remark">
              <up-input v-model:value="formModel.remark" placeholder="请输入备注">
              </up-input>
            </up-form-item>
          </up-form>
        </scroll-view>
      </view>

      <view class="modal-footer">
        <up-button type="primary" @click="submit">确认</up-button>
      </view>
    </up-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
const formRef = ref(null);
const props = defineProps({
  type: {
    type: String,
    default: 'add',
  },
  rowData: {
    type: Object,
    default: () => { },
  }
})
defineOptions({ name: "LowVideoModal" });

// 创建响应式数据  
const show = defineModel<boolean>("show", { default: false });
const parkingOptions = ref([
  {
    id: '0',
    name: '港龙·滨江公园',
  },
  {
    id: '1',
    name: '盈月路蘑菇蹲',
  },
  {
    id: '2',
    name: '杏坛镇雁安路',
  },
  {
    id: '3',
    name: '杏坛镇雁园大道',
  },
  {
    id: '4',
    name: '杏坛镇政和西路杏坛镇建设东一路',
  },
  {
    id: '5',
    name: '杏坛镇建设路',
  },
])

const operatorOptions = ref([
  {
    id: '0',
    name: '大良镇',
  },
  {
    id: '1',
    name: '顺德佛山交通大队',
  },
  {
    id: '2',
    name: '容桂镇',
  },
  {
    id: '3',
    name: '杏坛镇',
  },
  {
    id: '4',
    name: '伦教街道二期',
  },
  {
    id: '5',
    name: '勒流镇',
  },
])

const deviceTypeOptions = ref([
  {
    id: '0',
    name: '路牙机',
  },
  {
    id: '1',
    name: '视频桩',
  },
])

const factoryOptions = ref([
  {
    id: '0',
    name: '杭州鼎器',
  },
  {
    id: '1',
    name: '深圳华夏',
  },
  {
    id: '2',
    name: '杭州海康',
  },
  {
    id: '3',
    name: '成都臻识',
  },
])

const streamTypeOptions = ref([
  {
    id: '0',
    name: 'FLV',
  },
  {
    id: '1',
    name: 'MJPEG',
  },
])

const protocolOptions = ref([
  {
    id: '0',
    name: 'HTTP',
  },
  {
    id: '1',
    name: 'MQTT',
  },
  {
    id: '2',
    name: 'SOCKET',
  },
])

/**
 * 初始化表单数据
 * 停车场下拉选择
 * 运营商下拉选择
 * 设备序列号
 * 设备类型下拉选择
 * 厂商类型下拉选择
 * 泊位号
 * 通讯协议下拉选择
 * 视频取流方式下拉选择
 * 详细地址
 * 经度
 * 纬度
 * 本地IP
 * 设备MAC
 * 设备登录账号
 * 设备登录密码
 * 物联网卡号
 * 卡号
 * 备注
 */
const formModel = ref(createDefaultModel());
function createDefaultModel() {
  return {
    parkingId: '',
    operatorId: '',
    deviceSerialNo: '',
    deviceTypeId: '',
    factoryId: '',
    berthNo: '',
    protocolId: '',
    streamTypeId: '',
    address: '',
    longitude: '',
    latitude: '',
    localIp: '',
    deviceMac: '',
    loginAccount: '',
    loginPassword: '',
    iotCardNo: '',
    cardNo: '',
    remark: '',
  };
}
const rules = reactive({
  parkingId: [{ required: true, message: '请选择停车场', trigger: 'blur' }],
  operatorId: [{ required: true, message: '请选择运营商', trigger: 'blur' }],
  deviceSerialNo: [{ required: true, message: '请输入设备序列号', trigger: 'blur' }],
  deviceTypeId: [{ required: true, message: '请选择设备类型', trigger: 'blur' }],
  factoryId: [{ required: true, message: '请选择厂商类型', trigger: 'blur' }],
  protocolId: [{ required: true, message: '请选择通讯协议', trigger: 'blur' }],
  streamTypeId: [{ required: true, message: '请选择视频取流方式', trigger: 'blur' }],
  address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
  longitude: [{ required: true, message: '请输入经度', trigger: 'blur' }],
  latitude: [{ required: true, message: '请输入纬度', trigger: 'blur' }],
})
function handleInitModel() {
  formModel.value = createDefaultModel();
  if (!props.rowData) return;
  if (props.type === "edit") {
    Object.assign(formModel.value, props.rowData);
  }
}
const title = computed(() => {
  const titles: any = {
    add: "新增低位视频桩",
    edit: "编辑低位视频桩",
  };
  return titles[props.type];
});


const submit = async () => {
  console.log(formModel.value);
  await formRef.value.validate();
}

// 定义方法  
function open() {
  show.value = true;
  handleInitModel();
  formRef.value.resetFields();
}

function close() {
  // 关闭逻辑，设置 show 为 false  
  show.value = false;
  console.log('close');
}  
</script>

<style scoped lang="scss">
.new-or-edit-modal {
  .modal-header {
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .modal-content {
    overflow-y: auto;
    padding: 20rpx;
  }
}
</style>
